<template>
  <div class="header-content">
    <div class="back content-position" @click="leftClick">
      {{leftText}}<i :class="leftIcon" style="font-size: 25px"></i>
    </div>
    <div class="title content-position">{{content}}</div>
    <div class="other">
      <i :class="rightIcon"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    name: 'union-head',
    props: {
      content: {
        type: String,
        default: undefined
      },
      rightIcon: {
        type: String,
        default: undefined
      },
      leftIcon: {
        type: String,
        default: undefined
      },
      leftText: {
        type: String,
        default: undefined
      }
    },
    components: {
    },
    data () {
      return {}
    },
    mounted () {
    },
    methods: {
      leftClick () {
        this.$emit('leftClick')
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "union-head.styl"
</style>
